<template>
    <div class="icons">
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="page of pages" :key="page.id">
            <div class="icons-content" v-for="icon of page.val" :key="icon.id">
              <div class="icons-content-icon">
                <img class="icons-content-icon-img" :src="icon.imgUrl" alt="">
              </div>
              <p class="icons-content-desc">{{icon.desc}}</p>
            </div>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name:"homeIcons",
  props:["iconsList"],
  components: {
    swiper,
    swiperSlide
  },
  data(){
    return {
      // 参数配置，具体可上官网查看  loop左右轮播，autoplay自动轮播
      swiperOption:{
        pagination:".swiper-pagination",
        //等同于以下设置
        // autoplay: {
        //   delay: 6000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: true,
        // },
      }
    }
  },
  computed:{
    //计算属性设置一个分页数组，进行人为分页，
    //将一维数组按一定规则重组为二维数组
    pages(){
      let pages=[];
      let valPage=[];
      this.iconsList.forEach((item,index)=>{
        const page=Math.floor(index/8);
        if(!pages[page]){
          valPage=[];
          pages[page]={ id:index,val:valPage};
        }
        valPage.push(item);
      });

      return pages;
    }
  }
}
</script>

<style lang="stylus" scoped>
@import ('~styles/varibles.styl');
@import ('~styles/mixins.styl');

// 使轮播组件具有和icons一样的高度，这样在整个高度下，拖动都会有轮播效果
.icons >>> .swiper-container {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 50%;
}

.icons {
  /* width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 50%; */
  margin-bottom: 0.23rem;

  .icons-content {
    width: 25%;
    height: 0;
    overflow: hidden;
    padding-bottom: 25%;
    position: relative;
    float: left;

    // 相对定位和绝对定位的使用
    .icons-content-icon {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0.44rem;
      box-sizing: border-box;
      padding: 0.1rem;

      .icons-content-icon-img {
        height: 100%;
        display: block;
        margin: 0 auto;
        padding-top: 0.08rem;
      }
    }

    .icons-content-desc {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 0.44rem;
      line-height: 0.44rem;
      color: $darkTextColor;
      text-align: center;
      // 文字超出以...省略   代码在styles/mixins.styl   可具体参考
      ellipsis();
    }
  }
}
</style>

